<template>
  <el-card class="short-link-group-container" v-loading="createShortLink.isAjaxing">
    <div>
      <div class="card-title">
        <div class="card-title-left">
          <h3>{{ props.groupTitle }}</h3>
          <span class="sub-title">共{{ createShortLink.shortLinkTableData.length }}个链</span>
          <el-button type="primary" size="mini" plain @click="openDiialogCreate('创建','创建活码')">创建旧码</el-button>
        </div>
      </div>
      <div class="create-link-operate-box">
        <div class="create-link-operate-btn">
          <!--          功能按钮-->
          <el-button class="fun-btn" size="mini" type="success" @click="addQRCode">打包下载</el-button>
          <el-button class="fun-btn" size="mini" type="warning" @click="moveGroup">移动</el-button>
          <el-button class="fun-btn" size="mini" type="danger" @click="deleteClcik('del','1')">批量删除</el-button>
        </div>
      </div>
      <el-table :data="createShortLink.shortLinkTableData" height="650"  :border="false" @selection-change="selectTableCheckbox">
        <el-table-column type="selection" width="35px">
        </el-table-column>
        <el-table-column prop="shortUrlMsg" label="全选">
          <template #default="scope">
            <h3>{{scope.row.name}}</h3>
            <div class="table-time"><i class="el-icon-time"></i>{{scope.row.create_time}}</div>
            <div class="table-file">
              <span v-if="scope.row.isImg"><a :href="baseUrl+'/' + scope.row.img" :download="scope.row.img" target="_blank"><img :src="baseUrl +'/'+scope.row.img" style="width:80px;height:80px;"></a></span>
              <span v-else-if="scope.row.isFiles"><img src="/img/table-operate-images/文件.svg" alt="qrcode_icon"><a :href="baseUrl+'/' + scope.row.img" :download="scope.row.img">{{scope.row.img.slice(17)}}</a></span>
              <span v-else-if="scope.row.isMedia"><img src="/img/table-operate-images/新媒体.svg" alt="qrcode_icon"><a :href="baseUrl+'/' + scope.row.img" :download="scope.row.img" target="_blank">{{scope.row.img.slice(17)}}</a></span>
              <span v-else-if="scope.row.isCompress"><img src="/img/table-operate-images/压缩文件.svg" alt="qrcode_icon"><a :href="baseUrl+'/' + scope.row.img" :download="scope.row.img">{{scope.row.img.slice(17)}}</a></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200px">
          <template #default="scope">
            <div class="operate-btn-group">
              <img src="/img/table-operate-images/qrcode_icon.png" alt="qrcode_icon" @click="QRcodeHandler(scope.row)">
              <img class="copy-icon-img" src="/img/table-operate-images/copy_active.png" alt="copy_active" @click="copyShort(scope.row)">
              <img src="/img/table-operate-images/edit_icon.png" alt="edit_icon" @click="openDiialogCreate(scope.row,'修改活码')">
              <img src="/img/table-operate-images/delete_icon.png" alt="delete_icon" @click="deleteClcik(scope.row,'2')">
            </div>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div class="empty-box">
            <img class="empty-img" src="/img/404-images/empty.png" alt="暂无内容">
            <div>该分组下还未创建过旧码</div>
            <el-button class="empty-button" type="primary" size="mini" @click="createShortLink.showBatchCreateLinkDialog=true">创建活码</el-button>
          </div>
        </template>
      </el-table>
    </div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="createShortLink.query.page"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="createShortLink.query.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="createShortLink.total">
    </el-pagination>
  </el-card>

  <el-dialog :title="createShortLink.dialogTitle" @opened="dialogOpend" :before-close="resetForm" v-model="createShortLink.showBatchCreateLinkDialog" width="544px" top="40px" custom-class="create-link-dialog">
    <el-form class="create-short-link-form batch-create-short-link-form" ref="formRef" :model="createShortLink.formData"
             label-position="top" :rules="createShortLink.formRules">
      <el-form-item label="标题" prop="name">
        <el-input placeholder="请输入短链标题" v-model="createShortLink.formData.name">
        </el-input>
      </el-form-item>
      <el-form-item label="入口域名" prop="domain">
        <el-select v-model="createShortLink.formData.domain" placeholder="请选择入口域名">
          <el-option
            v-for="item in createShortLink.entryDomain"
            :key="item.id"
            :label="item.domain"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="state" label="是否开启">
        <el-switch v-model="createShortLink.formData.state" active-color="#13ce66" inactive-color="#eaecf0"></el-switch>
      </el-form-item>
      <el-form-item prop="img" label="选择文件">
        <!--              :action="createShortLink.uploadUrl"-->
        <el-upload
          :before-remove="delBefore"
          class="upload-demo"
          :file-list="createShortLink.fileList"
          :on-preview="handlePreview"
          :limit="1"
          :headers="createShortLink.uploadHeader"
          :action="baseUrl + '/upload'"
          :data="{path:'old_code'}"
          :on-success="(response,file,fileList)=>handleAvatarSuccess('old_code',response,fileList)"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <div class="file-text" v-if="!createShortLink.formData.img">
          <div>仅支持：以下上传格式，且只能上传一项</div>
          <div>图片：jpg、jpeg、gif、png</div>
          <div>文件：docx、doc、ppt、pptx、pdf、xls、xlsx</div>
          <div>媒体：mp3、wma、m4a、wav、aac、mp4、mov、avi、flv、wmv、mts</div>
          <div>压缩文件：zip、rar</div>
        </div>
      </el-form-item>
      <el-form-item label="内容" prop="info">
        <div id="textArea"></div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="default" size="mini" @click="createShortLink.showBatchCreateLinkDialog = false">取消</el-button>
      <el-button type="primary" size="mini" @click="submit" :loading="createShortLink.throttle">保存</el-button>
    </template>
  </el-dialog>

  <!--  二维码弹框-->
  <el-dialog title="二维码" custom-class="download-code-dialog" v-model="createShortLink.QRcodeDialog" width="350px">
    <div class="QRcode-box">
      <img :src="baseUrl +'/' + createShortLink.downloadQRCode">
      <a :href="baseUrl+'/' + createShortLink.downloadQRCode" :download="createShortLink.downloadQRCode+'.png'" class="download-qrcode-btn">下载二维码</a>
    </div>
  </el-dialog>

<!--  移动-->
  <el-dialog title="旧码移动至" v-model="createShortLink.moveDialog" @closed="resetmove">
      <el-form  label-position="top" :model="createShortLink.moveForm" ref="moveformRef">
        <el-form-item label="分组" prop="name"  width="100%">
          <el-select v-model="createShortLink.moveForm.groupingName" placeholder="请选择" width="100%">
            <el-option
              width="100%"
              v-for="item in createShortLink.optionGrop"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="default" size="mini" @click="createShortLink.moveDialog = false">取消</el-button>
        <el-button type="primary" size="mini" @click="moveOldCodeLink">确定</el-button>
      </template>
  </el-dialog>
</template>

<script setup>
import {onBeforeRouteUpdate, useRoute} from 'vue-router';
import {reactive, getCurrentInstance, onMounted, nextTick, ref} from 'vue'
import E from 'wangeditor'
import {upload} from "../../../axios/adminRequest";
import baseUrl from "../../../axios/baseUrl";
import {addOldCode, delOldCode, editOldCode, fallList, getOldCodeList, rbShortList} from "../../../axios/userRequest";
import {ElMessage, ElMessageBox} from "element-plus";
import { copySome, downloadImgZip, getImgBase64 } from '@/utils/utils'
const { proxy } = getCurrentInstance()
const imgRootSrc = '/img/my-short-chain-images/short-chain-management-images/'
let route =useRoute()
const props = defineProps({
  groupTitle:{
    type: String
  }
})
// 创建活码弹窗数据
let createShortLink = reactive({
  moveDialog:false,
  entryDomain:[],
  imageUrl: '',
  uploadHeader:{
    'token':localStorage.getItem('userCenter_token')
  },
  arr:[],
  showBatchCreateLinkDialog:false,
  shortLinkTableData:[],
  showOperateSelect:false,
  QRcodeDialog:false,
  editId:'',
  copyLink:'',
  isAjaxing:true,
  dialogTitle:'', //弹框title
  formData:{
    f_id:'',
    name:'',
    info:'',
    state:false,
    domain:'',
    type:'2',
    img:''
  },
  selectList:[],
  throttle:false,
  optionGrop:[],
  moveForm:{
    groupingName:null
  },
  fileList:[],//上传文件数据
  delData:[],
  moveData:[],
  downloadQRCode:'',
  downloadQRUrl:'',
  query:{
    type:2,
    page:1,
    limit:10,
    f_id:''
  },
  formRules:{
    name: [{ required:true,message:'请输入标题',trigger:'blur' }],
    info: [{ required:true,message:'请输入内容',trigger:'blur' }],
    domain: [{ required:true,message:'请选择域名',trigger:'blur' }],
    img: [{ required:true,message:'请选择文件',trigger:'blur' }]
  }
})
// allData用于存储页面所有的响应式数据，最好所有的变量全部写在这里面，方便路由变化的时候，直接将页面所有数据初始化
// let allData = null;
let editor = null //这个可以不用，这个是dom元素的变量不用管
// const initFun = async ()=>{
//   // allData =  reactive({
//   //
//   // })
//   //关于数据获取的操作全部写在这里面
//   //获取请求，重新渲染页面的
//   // console.log('route.params.id',route.params.id)
//   // console.log(route.params.id)
//   let {code,data,msg} = await getOldCodeList({type:2,f_id:route.params.id})
//   if(code !=0) return proxy.$message.error(msg)
//   createShortLink.shortLinkTableData = data
//
// }
//


const QRcodeHandler=(data)=>{
  createShortLink.QRcodeDialog = true
  createShortLink.downloadQRCode = data.code
  createShortLink.downloadQRUrl = data.url
}

const downs = ()=>{
  // proxy.$confirm(createVNode(liveCodeDownloadCode,{
  //   codeUrl:baseUrl +'/' + createShortLink.downloadQRCode,
  //   url: createShortLink.downloadQRUrl
  // }),'下载二维码',{
  //   closeOnClickModal:false,
  //   customClass:'commonMessageBox',
  //   confirmButtonText:'确认下载'
  // }).then(()=>{
  //   downloadSome(baseUrl +'/' + createShortLink.downloadQRCode,'asdad.png')
  // })
}


const handleSizeChange = (val)=>{
  createShortLink.query.limit = val
  createShortLink.query.page = 1
  init(route.params.id)
}

const handleCurrentChange = (val)=>{
  createShortLink.query.page = val
  init(route.params.id)
}

// onMounted(()=>{
//   getDomainList()
// })

//移动分组
const moveGroup = ()=>{
  if(createShortLink.selectList <= 0)return proxy.$message.error('请选择需要移动的数据')
  createShortLink.moveDialog = true
  moveGroupList()
}

const moveGroupList = async ()=>{
  const res = await getOldCodeList({type:1})
  if(res.code !=0)return proxy.$message.error(res.msg)
  createShortLink.optionGrop = res.data
  if(route.params.id !== '0'){
    createShortLink.optionGrop.unshift({
      name:'默认分组',
      id:0
    })
    createShortLink.optionGrop.forEach((item,index)=>{
      if((item.id).toString() === route.params.id){
        createShortLink.optionGrop.splice(index,1)
      }
    })
  }
}


onBeforeRouteUpdate((to)=>{
  init(to.params.id)
})

const getDomainList = () => {
  fallList({type:4}).then(res=>{
    if(res.code === 0){
      createShortLink.entryDomain = res.data.data['4']

    }else{
      proxy.$message.error(res.msg)

    }
  })
}


const init = async(id)=>{
  if(id !== ''){
    createShortLink.query.f_id = id
  }
  let {code,data,msg} = await getOldCodeList(createShortLink.query)
  if(code != 0)return proxy.$message.error(msg)
  createShortLink.shortLinkTableData = data.data
  createShortLink.shortLinkTableData.forEach( item=>{
    let index = item.img.lastIndexOf("\.")+1
    let obj = item.img.substring(index,item.img.length)
    if(['jpg','jpeg','gif','png',].includes(obj)){
      item.isImg = true
    }else if(['docx','doc','ppt','pptx','pdf','xls','xlsx'].includes(obj)){
      item.isFiles =true
    }else if(['mp3','wma','m4a','wav','aac','mp4','mov','avi','flv','wmv','mts'].includes(obj)){
      item.isMedia =true
    }else if(['zip','rar'].includes(obj)){
      item.isCompress =true
    }
  })
  createShortLink.total = data.total
  createShortLink.isAjaxing = false
}
init(route.params.id)



//上传
const handleAvatarSuccess =(name,response,fileList)=>{
  if(response.code === 0){
    createShortLink.formData.img = response.data.path
    createShortLink.fileList = fileList
    // createShortLink.fileList.push({name:fileList.name,url:baseUrl +'/'+ response.data.path})
    // console.log(fileList)
  }else{
    createShortLink.fileList = []
    proxy.$message.error(response.msg)
  }
}

const handlePreview = (file)=>{
  console.log(file)
}



const uploadFile = (resultFiles, insertImgFn)=>{
  // resultFiles 是 input 中选中的文件列表
  // insertImgFn 是获取图片 url 后，插入到编辑器的方法
  let param = new FormData()  // 创建form对象
  param.append('file', resultFiles[0])
  param.append('path', 'notice')
  upload(param).then(res=>{
    if(res.code == 0){
      // 上传图片，返回结果，将图片插入到编辑器中
      insertImgFn(baseUrl +'/'+res.data.path)
    }
  })
}

const dialogOpend = ()=>{
  if(!editor) {
    editor = new E('#textArea')
    editor.config.customUploadImg = uploadFile
    editor.config.customUploadVideo = uploadFile
    editor.create()
    if(createShortLink.dialogTitle.indexOf('修改') >= 0){
      createShortLink.shortLinkTableData.forEach(item=>{
        if(item.id == createShortLink.editId){
          editor.txt.html(item.info)
        }
      })
    }
  }
}

const delBefore =(file, fileList)=>{
  return new Promise((resolve, reject)=>{
    resolve(createShortLink.formData.img = '')
  })

}
const openDiialogCreate = (row,title)=>{
  if(title === '创建活码'){
    createShortLink.formData.f_id = ''
    createShortLink.formData.name = ''
    // createShortLink.formData.info = ''
    createShortLink.formData.state = false
    createShortLink.formData.type = '2'
    createShortLink.formData.img = ''
    createShortLink.formData.domain = ''
    createShortLink.fileList = []

    createShortLink.showBatchCreateLinkDialog=true
    createShortLink.dialogTitle = title
  }else if('修改活码') {
    getDomainList()
    createShortLink.showBatchCreateLinkDialog=true
    createShortLink.dialogTitle = title
    createShortLink.formData.domain = row.domain
    createShortLink.editId = row.id
    createShortLink.formData.name = row.name
    createShortLink.formData.state = row.state==1?true:false
    createShortLink.formData.img = row.img
    createShortLink.fileList = [{url: baseUrl +'/'+row.img,name:row.img.split('/')[2],uid: +new Date()}]
    if(editor){
      editor.txt.html(row.info)
    }
  }
}

//格式化表单数据

let resetForm = (type) => {
  createShortLink.formData.domain = ''
  createShortLink.formData.name = ''
  createShortLink.fileList = []
  proxy.$refs.formRef.resetFields()
  createShortLink.showBatchCreateLinkDialog = false
  editor.txt.html('')
}

const resetmove = () =>{
  proxy.$refs.moveformRef.resetFields()
  createShortLink.moveDialog = false
}

//删除弹框
let deleteClcik = async(row,type) =>{
  if( type ==='1' && createShortLink.delData.length === 0){
    createShortLink.showBatchCreateLinkDialog = false
    proxy.$message.error('请选择需要删除的数据')
    return false
  }
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    closeOnClickModal:false,
    customClass:'commonMessageBox',
  })
    .then(async() => {
      let {code,msg} = await delOldCode({id:type==='1'?createShortLink.delData:[row.id]})
      if(code !=0)return proxy.$message.error(msg)
      proxy.$message.success(msg)
      createShortLink.showBatchCreateLinkDialog = false
      init(route.params.id)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
}

//添加或修改
const submit= async()=>{
  createShortLink.formData.f_id = route.params.id
  createShortLink.formData.info =editor.txt.html()
  createShortLink.throttle = true
  if(createShortLink.dialogTitle === '创建活码'){
    proxy.$refs.formRef.validate(async(valid) =>{
      if(!valid)return proxy.$message.error('表单信息不全，请重试')
      createShortLink.formData.domain = createShortLink.formData.domain +''
      createShortLink.formData.state = createShortLink.formData.state?'1':'0'
      let {data,msg,code} = await addOldCode(createShortLink.formData)
      if(code != 0)return proxy.$message.error(msg)
      proxy.$message.success(msg)
      createShortLink.formData.info = editor.txt.html('')
      init(route.params.id)
    })
  }else if(createShortLink.dialogTitle === '修改活码'){
    createShortLink.formData.state = createShortLink.formData.state?1:0
    proxy.$refs.formRef.validate(async(valid)=>{
      if(!valid)return proxy.$message.error('表单信息不全，请重试')
      let {msg,code} = await editOldCode(createShortLink.editId,createShortLink.formData)
      if(code != 0)return proxy.$message.error(msg)
      proxy.$message.success(msg)
      // createShortLink.dialogTitle = '创建活码'
      resetForm()
      init(route.params.id)

    })

  }
  createShortLink.throttle = false
  createShortLink.showBatchCreateLinkDialog = false
}

const moveOldCodeLink = async()=>{
  let id = createShortLink.moveData
    if(createShortLink.moveForm.groupingName === '')return proxy.$message.error('请选择分组')
    let {msg,code} = await editOldCode(createShortLink.moveForm.groupingName,{ids:id})
    if(code != 0)return proxy.$message.error(msg)
    proxy.$message.success(msg)
    createShortLink.moveForm.groupingName = ''
    createShortLink.moveDialog = false
    init(route.params.id)

}

//复制
const copyShort = row=>{
  let copyUrl =  row.custom_domain ? row.custom_domain.domain+'/'+row.url : row.url
  copySome(copyUrl,()=> proxy.$message.success('复制成功'))
}

// 表格选中状态切换时执行的方法
let selectId = ref([])
const selectTableCheckbox = (val) =>{
  createShortLink.selectList = val.length
  createShortLink.showOperateSelect = val.length !== 0;
  createShortLink.delData = val.map(item=>item.id)
  createShortLink.moveData = val.map(item=>item.id)
  selectId.value = []
  val.forEach(item => selectId.value.push(item.id))
}

//批量下载二维码
const addQRCode = ()=> {
  if(createShortLink.selectList <= 0)return proxy.$message.error('请选择您要下载的数据')
  let imgArr = []
  createShortLink.shortLinkTableData.forEach(item=>{
    if(selectId.value?.includes(item.id)){
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      // image.src = baseUrl+'/'+item.code // 服务器短链二维码
      image.src = '/img/404-images/下载测试二维码.png' // 本地环境测试图片
      image.onload = ()=>{
        imgArr.push({ name: item.name, baseImg: getImgBase64(image) })
        imgArr.length === selectId.value.length ? downloadImgZip(imgArr,`旧码-${props.groupTitle}`) : ''
      }
    }
  })
  proxy.$message.success('下载成功')
  init(route.params.id)
}

</script>

<style lang="less" scoped>
.short-link-group-container{
  height: 100%;
  border: none;


  .fun-btn{
    width:98px !important;
  }

  &:deep(.el-table__empty-block){
    margin-bottom: 30px !important;

    .empty-box{
      display: flex;
      align-items: center;
      flex-direction: column;

      .empty-button{
        background-color: #0766fe !important;
        span{
          color: #FFFFFF !important;
          z-index: 9999999;
        }
      }
    }
  }

  &:deep(.el-card__body){
    height: 100%;
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;

    .card-title {
      height: 32px;

      .card-title-left {
        display: flex;
        align-items: center;
        height: inherit;

        h3 {
          margin-right: 6px;
          font-weight: normal;
        }

        .sub-title {
          margin: 0 50px 0 15px;
        }

        .el-button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 32px;
          font-size: 14px;
          &:nth-of-type(1){
            margin-right: 15px;
          }
        }
      }
    }
    .create-link-operate-box {
      margin: 20px 0 15px;
      .create-link-operate-btn {
        .el-dropdown{
          .el-button{
            height: 32px;
            font-size:14px;
          }
        }
      }
      .create-link-input{
        max-width: 1000px;
        display: flex;
        .el-button--warning{
          width: 136px;
          height: 40px;
          margin-left: 15px;
        }
      }
    }

    .el-table {
      .short-link-info {
        display: flex;
        flex-wrap: wrap;
        .short-link-info-img{
          margin-right: 15px;
          img {
            width: 36px;
            height: 36px;
          }
        }
        .short-link-title {
          color: @title;
          font-size: 16px;
        }
      }

      .short-link-date {
        color: #C1C4CB;
        font-size: 12px;
      }

      .cross-head, .cross-content {
        font-size: 12px;
        line-height: 10px;
        color: @secondary;
      }

      .cross-content {
        font-weight: bold;
      }
      h3{
        font-weight: normal!important;
        color: @subtitle!important;
      }
      .short-link-box {
        display: flex;
        align-items: center;
        .short-link-left {
          margin-right: 25px;
          .el-tag {
            font-size: 12px;
          }
        }
        img {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        img.qrcode-icon-img {
          margin-left: 30px;
        }
        img.copy-icon-img {
          margin-left: 15px;
        }
      }
      .operate-btn-group {
        display: flex;
        align-items: center;

        img {
          width: 20px;
          height: 20px;
          cursor: pointer;
          margin-right: 30px;
        }
      }
      .el-table__body-wrapper {
        overflow-x: hidden;
      }
    }
  }
}

.table-time{
  font-size: 12px;
  color: rgb(102, 102, 102);

  i{
    margin-right: 3px;
  }
}

.table-file{
  font-size: 12px;
  color: rgb(102, 102, 102);

  img{
    width: 17px;
    height: 17px;
    vertical-align: text-top;
    margin-right:8px;
  }

  span{
    a{
      text-decoration:none;
      color: rgb(102, 102, 102);
    }
  }
}

&:deep(.el-icon-upload-success::before){
  content: "x";
  color: red;
  font-size:18px;
}

&:deep(.el-upload-list__item){
  background-color:#f5f7fa;
}

&:deep(.el-upload-list__item-name:hover){

  .el-icon-close{
    font-size: 16px;
    color: red !important;
  }
}

&:deep(.el-icon-close){
  font-size: 16px;
  color: red !important;
}

.select-flie{
  width:100%;
  height:90px;
  border: 1px dashed hsla(210,8%,51%,.25);
  border-radius: 4px;
  background-color: #fbfbfb;
}

.el-dialog{
  height: 900px;
  max-height: 900px;
}
.el-tabs{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      .el-tabs__nav-scroll{
        &:deep(.el-tabs__nav){
          .el-tabs__active-bar{
            width: 40px;
          }
          .el-tabs__item{
            width: 90px;
            height: 22px!important;
            line-height: unset!important;
            &:hover{
              color: @secondary!important;
            }
          }
        }
      }
    }
  }
  .el-tabs__content{
    .el-tab-pane{
      .create-short-link-tab-title{
        display: flex;
        align-items: center;
        height: 22px!important;
        img{
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}

.create-short-link-form {
  margin-top: 20px;

  &:deep(.el-form-item){
    .el-form-item__label {
      color: @title;
      line-height: unset;
      font-size: 16px;
      padding-bottom: 16px;
    }

    .el-form-item__content {
      line-height: unset;
      .jump-link-input{
        display: flex;
        align-items: center;
      }
      .el-input {
        .el-input-group__append {
          .el-dropdown{
            margin: 0 13px;
          }
        }
      }
      .el-textarea{
        .el-textarea__inner{
          padding: 9px 15px;
        }
      }

      .select-group {
        width: 100%;
      }
      .el-alert{
        margin-top: 16px;
      }
      .el-radio-group{
        width: 100%;
        .el-radio{
          display: inline-flex;
          align-items: center;
          width: 25%;
          margin-right: 0;
          line-height: 48px;
          .el-radio__label{
            div{
              width: 28px;
              height: 28px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
            }
          }
        }
        .feishu-radio{
          .el-radio__label{
            display: flex;
          }
        }
      }
      .el-date-editor{
        width: 100%;
      }
    }
  }
  .continue-adding{
    height: 40px;
    border-radius: 2px;
    border: 1px dashed #E0E2E5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: @secondary;
    cursor: pointer;
    i{
      margin-right: 15px;
    }
  }

  .el-divider {
    margin: 50px 0 30px;
    .el-divider__text {
      color: @title;
      font-size: 16px;
    }
  }
}
.batch-create-short-link-form{
  margin-top: 0!important;
}
.el-dropdown-menu {
  &:deep(.el-dropdown-menu__item){
    line-height: 28px;
    letter-spacing: 2px;
  }
}
.select-short-link-box{
  width: 296px;
  padding:0 12px;
  box-sizing: border-box;
  .select-short-link-header{
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-link{
      font-size: 12px;
    }
  }
  .select-short-link-title{
    font-size: 14px;
    display: inline;
    color: @title;
    font-weight: 500;
    margin: 12px 0;
  }
  .el-dropdown-menu{
    .el-dropdown-menu__item{
      padding: 0;
      height: 32px;
      overflow: hidden;
      white-space:nowrap;
      text-overflow: ellipsis;
    }
  }
}

.QRcode-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  img,.download-qrcode-btn{
    width:80%;
  }
}
</style>

<style lang="less" scoped>
.create-link-dialog{
.el-dialog__body{
    height: 60vh;
    overflow: auto;
  }
}

&:deep(.el-select){
  width:100%;
}

.download-qrcode-btn{
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  background-color: @primary;
  color:#FFFFFF;
  text-decoration: none;
  border-radius: 3px;
  text-align: center;
  &:hover{
    background-color: @primary-active;
  }
}

.move-form-box{
  width:100%;
  height:200px;
}

  .table-text-color{
    color: #c1c4cb;
  }

  .file-text{
    margin:10px 0;
    color:#c1c4cb;
    border: 1px dashed #c1c4cb;
    border-radius: 8px;
    padding:20px 35px 20px 20px;
    box-sizing: border-box;
}

.statistics-dialog{
  max-width: unset;
  .el-dialog__header{
    height: 25px;
    background-color: @primary;
  }
  .el-dialog__body{
    padding: 0;
    max-height: unset;
    .statistics-dialog-header{
      background-color: @primary;
      height: 170px;
      padding: 0 32px 25px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .statistics-dialog-header-info{
        display: flex;
        .statistics-dialog-header-img{
          padding-right: 24px;
        }
        .statistics-dialog-header-text{
          color: #FFFFFF;
          .statistics-dialog-header-text-title{
            font-size: 26px;
            line-height: 37px;
          }
          .statistics-dialog-header-text-link{
            font-size: 16px;
            line-height: 22px;
          }
        }
      }
      .statistics-dialog-header-opreate{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .share-date-export {
          color: #FFFFFF;
          span{
            display: inline-flex;
            align-items: center;
            margin-right: 60px;
            cursor: pointer;
            img{
              margin-left: 20px;
            }
          }
        }
        .share-date-date {
          display: flex;

          .el-date-editor {
            margin-left: 20px;
          }
        }
      }
    }
    .el-tabs{
      padding: 30px 12px;
      .el-tabs__header{
        margin: 0 12px;
        .el-tabs__nav-wrap{
          .el-tabs__nav-scroll{
            .el-tabs__nav{
              .el-tabs__item{
                font-size: 16px;
              }
            }
          }
        }
      }
      .el-tabs__content{
        padding-top: 30px;
        .content-card{
          display: flex;
          margin: 0 20px;
          .el-card{
            .el-card__body{
              padding-left: 0;
            }
            &:nth-last-of-type(1){
              .el-card__body{
                padding-right: 0;
              }
            }
          }
        }
        .data-trend-container{

        }
        .operate-container{
          .el-card__body{
            padding: 20px;
          }
        }
        #pane-accessRecord{
          .el-table{
            .el-table__body{
              .access-device-box{
                display: flex;
                justify-content: space-between;
              }
            }
          }
        }
      }
    }
  }
}
.short-link-move-dialog{
  .el-form{
    .el-form-item{
      .el-form-item__content{
        .el-select{
          width: 100%;
        }
      }
    }
  }
}
.edit-link-dialog{
  .el-form{
    .el-form-item{
      .el-form-item__content{
        .el-date-editor--datetime{
          width: 100%;
        }
        .edit-link-text{
          color: @subtitle;
        }
      }
    }
  }
}
</style>

<style lang="less">
.download-code-dialog{
  .el-dialog__body{
    padding: 30px!important;
  }
}
</style>
